<template>
  <div class="scene_box">
    <h3>光源对物体表面的影响，点光源： PointLight</h3>
    <div class="canvas"></div>
  </div>
</template>

<script setup>
import { nextTick } from "vue";
import * as THREE from "three";
nextTick(() => {
  // ******************创建一个场景*************

  const scene = new THREE.Scene();
  const geometry = new THREE.BoxGeometry(80, 80, 80);
  // 漫反射网格材质MeshLambertMaterial (opens new window)会受到光照影响，
  const material = new THREE.MeshLambertMaterial({
    color: 0x00ffa0,
    transparent: false,
    opacity: 1,
  });
  const cube = new THREE.Mesh(geometry, material);
  cube.position.set(0, 0, 0);
  scene.add(cube);
  const xyz = new THREE.AxesHelper(100);
  scene.add(xyz);
  // ****************添加光源*********************
  //  添加光源
  //点光源：两个参数分别表示光源颜色和光照强度
  // 参数1：0xffffff是纯白光,表示光源颜色
  // 参数2：1.0,表示光照强度，可以根据需要调整
  const light = new THREE.PointLight(0xffffff, 1);
  // 光照强度
  light.intensity = 20.0;
  // 光源衰减 0.0:不随着距离的远近而衰减
  light.decay=0.0
// 光源位置设置在，一定在在物体外表面以外
  light.position.set(1400, 500, 200);
  scene.add(light);
  console.log(light, "光源");

  // *****************照相机******************
  const width = 800;
  const height = 500;
  const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 3000);
  camera.position.set(200, 200, 200);
  camera.lookAt(cube.position);

  // *****************渲染器*****canvas*************
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);
  renderer.render(scene, camera);
  const Dom = document.querySelector(".canvas");
  console.log(Dom, "dom");
  Dom.appendChild(renderer.domElement);
});
</script>


<style lang="scss" scoped>
</style>